<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="tabsBox">
			<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab" color="#000000"
				activeColor="#6D9CB3" height="50rpx" lineHeight="5rpx" lineColor="#6D9CB3" lineScale="0.4"
				bgColor="transparent" paddingItem="20rpx">
			</v-tabs>
		</view>
		<view class="dataBox">
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
			<view class="dataItem">
				<view class="titleBox">
					<image :src="baseurl+'project/test.png'" class="avatar"></image>
					<text class="name">测试是的撒</text>
					<text class="time">20240612</text>
				</view>
				<text class="title">#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~#龙湖天府 青云阙工程进度更新啦~</text>
				<text class="desc">龙湖天府 青云阙工程进度已上新，想了解楼盘修建情况？点击“工程进度”，直观了解工程进度情况，</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '项目名称',
					bgColor: 'transparent',
					color: '#000000',
				},
				tabs: ['全部(112)', '帖子(112)', '活动(112)'],
				content: ''
			}
		},
		onLoad(options) {
			// 项目详情
			// this.$request.get(`project.project/detail?project_id=${options.id}`).then(res => {
			// 	console.log(res.data.data);
			// 	this.content = res.data.data;
			// })
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.dataBox {
		position: fixed;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		height: 80vh;

		.dataItem {
			width: 100%;
			background-color: #fff;
			border-radius: 15rpx;
			position: relative;
			padding-bottom: 24rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.desc {
				width: 642rpx;
				font-size: 28rpx;
				color: #333333;
				opacity: 0.4;
				margin-top: 15rpx;
				margin-left: 24rpx;
			}

			.title {
				width: 642rpx;
				margin-left: 24rpx;
				margin-top: 15rpx;
				font-weight: 500;
				font-size: 32rpx;
			}

			.titleBox {
				width: 686rpx;
				height: 80rpx;
				background: url('https://miantou.guguan.net/img/project/newsTitleBg.png');
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				position: relative;

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-left: 24rpx;
				}

				.name {
					color: #333333;
					font-size: 24rpx;
					margin-left: 10rpx;
					font-weight: 500;
				}

				.time {
					position: absolute;
					color: #333333;
					font-size: 24rpx;
					opacity: 0.4;
					right: 24rpx;
					font-weight: 500;
				}

			}
		}
	}

	.tabsBox {
		width: 100%;
		margin-left: 35rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: url('https://miantou.guguan.net/img/project/newsBg.jpg');
		background-size: 100% 100%;
	}
</style>